<template>
    <div class="city-list">
        <p class="title">当前城市</p>
        <div class="content">
            <div class="btn">
                丽江
            </div>
        </div>
        <p class="title">热门城市</p>
        <div class="content" >
            <div class="btn" v-for="item of hotCities" :key="item.id">
                {{item.name}}
            </div>
        </div>
        <div class="area"  v-for="(itemlist,inx) of cities" :key="inx">
            <p class="title">{{inx}}</p>
            <div class="item-list" >
                <div class="item" v-for="item of itemlist" :key="item.id">
                    {{item.name}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"CityList",
    props:{
        cities:{
            type:Object
        },
        hotCities:{
            type:Array
        }

    }
}
</script>
<style lang="scss" scoped>
    .city-list{
        padding-top: 160px;    
    }
    .title{
        line-height: 60px;
        padding-left: 20px;
    }
    .content{
        padding: 15px 15px;
        background: #fff;
        display: grid;
        grid-row-gap: 15px;
        text-align: center;
        justify-content: space-around;
        grid-template-columns: 200px 200px 200px;
        .btn{
            width: 200px;
            line-height: 50px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
    }
    .item-list{
        padding: 20px;
        background: #fff;
        .item{
            border-bottom: 1px solid#eee;
            line-height: 54px;
        }

    }
</style>
